<template>
  <div class="cont-sidebar">
    <div class="cs-title">{{ name }}</div>
    <ul class="sidebar-list cs-list">
      <li v-for="(item, idx) in sList" :class="[{active: activeIdx == idx}]" :key="idx" @click="navTo(item, idx)">{{ item && item.name ? item.name : item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'contSidebar',
  props: {
    name: {
      type: String,
      default: ''
    },
    siderList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      activeIdx: 0,
      sList: this.siderList
    }
  },
  methods: {
    getPointList (val) {
      this.sList = val
    },
    changeActive (idx) {
      this.activeIdx = idx
    },
    navTo (item, idx) {
      this.activeIdx = idx
      this.$emit('handleAcitve', item)
    }
  }
}
</script>
<style>
  .cs-title {
    padding: 0 22px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-bottom: 1px solid #31363F;
    font-size: 16px;
    font-weight: bold;
  }
</style>
